<template>
  <div class="bgColor" :class="dayModel===false?'bFColor':''">
    <div class="sortFont">分类</div>
    <el-tag @click="getBlogByType(-1)" class="myTag" type="success" effect="plain" :style="routerName==='type'?'':'display:none'">全部</el-tag>
    <el-tag @click="getBlogByType(type.id)" v-for="type in typeInfo" class="myTag" v-text="type.name" :style="sId!=type.id?{color:type.color}:{background:type.color,border:'0'}" :effect="sId===type.id?'dark':'plain'"></el-tag>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: "Type-T",
  data(){
    return {
      typeInfo: []
    }
  },
  mounted(){
    axios.get("/listType").then( (res) => {
      this.typeInfo = res.data
    })
  },
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    },
    routerName(){
      return this.$store.state.routerName;
    },
    sId(){
      return this.$store.state.sId;
    }
  },
  methods: {
    getBlogByType: function (id){
      this.$store.commit("setSid",id);
    }
  }
}
</script>

<style scoped>
.bFColor {
  background-color: #2f3133 !important;
  color: white !important;
}

.myTag {
  margin-right: 20px;
  margin-top: 10px;
  cursor: pointer;
}
.bgColor {
  transition: all .5s linear;
  background-color: white;
  padding: 20px 10px;
  border-radius: 10px;
}
.sortFont {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>